<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>修改元素样式</title>
        <style type="text/css">
            .wrapper { border: 2px solid blue ; width: 500px; height: 100px ; }
            .kaifamiao { background: #ff0 ; border-color: red; width: 600px ; }
        </style>
    </head>
    <body>

        <div class="buttons">
            <button onclick="change1()">通过修改style属性值的方式修改元素样式</button>
            <button onclick="change2()">通过修改class属性值的方式修改元素样式</button>
        </div>

        <div class="wrapper odd first"></div>

        <script type="text/javascript">
            function change1(){
                const w = document.querySelector( '.wrapper' );
                // CSS: background-color ===> JavaScript: backgroundColor
                w.style.backgroundColor = '#9696ff';
                // 为 w 的 style 属性(attribute) 添加 CSS 属性(propety)
                w.style.width = '600px';

                let style = w.getAttribute( 'style' );
                console.log( style );
            }
            function change2(){
                const w = document.querySelector( '.wrapper' );
                let list = w.classList ;
                console.log( list );
                console.log( w.className );
                list.toggle( 'kaifamiao' );
                console.log( list );
            }
        </script>
        
    </body>
</html>